<template>
  <div class="com-dialog">
    <el-dialog
      @close="close"
      :close-on-click-modal="false"
      :show-close="false"
      v-bind="$attrs"
      draggable
    >
      <template #header>
        <div class="header">
          <div class="title">
            {{ title }}
            <div class="spacer"></div>
            <el-icon :size="15" @click="close">
              <Close />
            </el-icon>
          </div>
        </div>
      </template>
      <slot name="default"></slot>
      <template #footer>
        <div class="footer" v-if="hasFooter">
          <slot name="footer">
            <el-button type="primary" @click="emit('ok')">确认</el-button>
            <el-button @click="cancel">{{ langMsg?.cancel || "取消" }}</el-button>
          </slot>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { Close } from "@element-plus/icons-vue";
import { inject } from "vue";
const props = defineProps({
  title: String,
  titleBg: {
    type: String,
    default: "#d9d9d9",
  },
  titleHeight: {
    type: String,
    default: "40px",
  },
  footerBg: {
    type: String,
    default: "#ffffff",
  },
  footerHeight: {
    type: String,
    default: "30px",
  },
  hasFooter: {
    type: Boolean,
    default: true,
  },
});
console.log(props);
const emit = defineEmits(["update:modelValue", "close", "cancel", "ok"]);
const langMsg :any= inject("langMsg");

const close = () => {
  emit("update:modelValue", false);
  emit("close");
};
const cancel = () => {
  emit("cancel");
  close();
};
</script>
<script lang="ts">
export default {
  name: "ComDialog",
};
</script>
<style lang="scss" scoped>
@use '@/assets/styles/backstage-management/index.scss';

.com-dialog :deep(.el-dialog__header) {
  position: relative;
  margin-right: 0;
  padding: 0 16px;
  height: v-bind(titleHeight);
  line-height: v-bind(titleHeight);
  background-color: #17274e;

  .el-dialog__headerbtn {
    position: relative;
    flex-grow: 1;
  }
}

.com-dialog :deep(.el-dialog) {
  display: flex;
  flex-direction: column;

  .el-dialog__body {
    flex-grow: 1;
  }
}

.com-dialog :deep(.el-dialog__footer) {
  padding: 0;
  background-color: #17274e;
}

.header {
  .title {
    display: flex;
    align-items: center;

    i {
      cursor: pointer;

      &:hover {
        color: var(--el-color-primary);
      }
    }
  }
}

.footer {
  display: flex;
  align-items: center;
  justify-content: end;
  padding: 16px;
  height: v-bind(footerHeight);
}
</style>
